<div class="lg:w-80 flex-shrink-0">
    <div class="bg-white rounded-lg border p-6">
        <div class="flex flex-col items-center text-center mb-6">
            <div class="relative">
                <%- include('../../components/avatar', { user: user, size: 'w-20 h-20', classes: 'rounded-full object-cover border-4 border-white shadow-lg' }) %>
            </div>
            <h2 class="mt-4 text-xl font-semibold text-gray-900"><%= user.username %></h2>
            <p class="text-sm text-gray-500"><%= user.email %></p>
        </div>
        <div class="bg-gray-200 h-px my-4"></div>
        <nav class="space-y-2">
            <%- include('../../components/nav', { href: `/book/${user.username}`, text: `${user.id === authUser.id ? '我的书籍' : '他的书籍'}`, icon: 'fas fa-book', className: 'w-full py-3' }) %>
        </nav>
    </div>
</div>